// Widget configuration.

form.dashboard-widget-geomap {
	.fields-group-clustering {
		display: flex;
		gap: 3px;
	}
}

// Widget view.

div.dashboard-widget-geomap {
	--hover-fill: #{$geomap-marker-hover-fill};
	--selected-fill: #{$geomap-marker-selected-fill};
	--selected-stroke: #{$geomap-marker-selected-stroke};

	.geomap-filter {
		position: absolute;
		right: 0;
		display: none;
		padding: 5px 20px 5px 10px;
		margin-top: 5px;
		margin-right: -2px;
		background-color: $ui-bg-color;
		border: 1px solid $overlay-border-color;

		&.collapsed {
			display: block;
		}

		li {
			width: calc(100% + 20px);
		}

		label {
			white-space: nowrap;
		}
	}

	.marker-cluster {
		background: none;

		> .cluster-outer-shape {
			border-radius: 50%;
			height: 30px;
			width: 30px;
			padding: 10px;
		}

		&:hover > .cluster-outer-shape {
			background: var(--hover-fill);
		}

		&.selected > .cluster-outer-shape {
			background: var(--selected-fill);
			outline: 2px solid var(--selected-stroke) !important;
		}

		div {
			text-align: center;
			border-radius: 50%;
			height: 30px;
			width: 30px;
		}

		span {
			line-height: 30px;
		}
	}

	.leaflet-marker-icon:focus {
		box-shadow: 0 0 0 2px $btn-focus-outline-color;
		border-radius: 2px;
		outline: none;
	}

	.leaflet-control {
		.navigate-home-button,
		.geomap-filter-button {
			cursor: pointer;

			&::before {
				vertical-align: middle;
			}
		}

		&.disabled {
			background-color: $white;
			opacity: 1;

			.geomap-filter-button {
				cursor: default;
				opacity: .4;
			}
		}
	}

	.leaflet-container {
		height: 100%;
		z-index: 1;
	}
}

.geomap-hintbox {
	overflow: auto;
	white-space: normal;

	tr[data-hostid] {
		cursor: pointer;
	}
}
